<template>
	<view class="content">

		<view class="top">
			<image src="../../../static/activity/centuryLaborUnion/indexTop.jpg" mode=""></image>
		</view>

		<!-- 头条热门 -->
		<view class="front_page">
			<view class="front_page_diss" @click="tap_frontPage">
				<image :src="frontPage.imgs" mode=""></image>
				<view class="front_page_roll">
					<view class="front_page_text">{{frontPage.init_index[frontPage.init_index.length-1].title}}</view>
				</view>
			</view>
		</view>

		<view class="details_back">

			<!-- 轮播图 -->
			<view class="swiper">
				<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
				<swiper class="swiper-index" previous-margin="45rpx" next-margin="10rpx" @change="handlechange"
					:current="mycurrent" :indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in lunbotu" :key="index" @click="journalism(index)">
						<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
							<img :src="item" style="width: 100%;height: 100%; border-radius: 15rpx;" alt="" srcset="">
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 列表 -->
			<view class="activity">
				<view class="" v-for="(item, idx) in list" @click="enter(item)">
					<view class="activity_frame">
						<img :src="item.imgs" mode=""></img>
						<view class="activity_text">{{item.name}}</view>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="base_list">
				<view class="base_forr" v-for="(item, idx) in base" @click="enter(item)">
					<image :src="item.imgs" mode=""></image>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				frontPage: [],
				lunbotu: [],
				mycurrent: 0,
				list: [],
				base: [],
			}
		},
		onLoad(opt) {
			this.show_loading();
			if (opt.code) {
				this.loginx(opt.code);
			} else {
				// this.token = uni.getStorageSync("formerToken")
				this.get_list();
			}
		},
		methods: {
			loginx(code) {
				let self = this
				self.$boya.Request({
					url: '/public/loginx',
					data: {
						code: code,
					}
				}, function(res) {
					self.show_loading()
					console.log("loginx", res);
					self.token = res.data.token
					uni.setStorageSync("formerToken", res.data.token)
					self.get_list();
				}, false)
			},
			get_list() {
				let self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 27,
					}
				}, function(res) {
					// console.log('data: ', res);
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].imgs) {
							let img = data[i].imgs.substring(2, data[i].imgs.length - 2);
							data[i].imgs = img
						}
						if (data[i].type == 1) {
							self.frontPage = data[i]
						}
						if (data[i].type == 4) {
							self.lunbotu.push(data[i].imgs)
						}
						if (data[i].type == 2) {
							self.list.push(data[i])
						}
						if (data[i].type == 3) {
							self.base.push(data[i])
						}
					}
					console.log('frontPage: ', self.frontPage);
					console.log('lunbotu: ', self.lunbotu);
					console.log('list: ', self.list);
					console.log('base: ', self.base);
					self.hide_loading();
				}, false)
			},
			handlechange(e) {
				this.mycurrent = e.detail.current
			},
			tap_frontPage() {
				// 头条
				console.log('头条');
				uni.navigateTo({
					url: '/pages/activities/centuryLaborUnion/headline?id=' + 234
				})
			},
			journalism(index) {
				// 轮播图
				console.log('轮播图', index);
				if (index == 0) {
					let url = 'https://tour.xuanran100.com/preview.html#/preview?projectId=5810'
					window.location.href = url
				}
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/activities/centuryLaborUnion/laborUnion'
					})
				}
			},
			enter(item) {
				console.log(item.id);
				if (item.id == 235) {
					// console.log('AI影像互动');
					uni.navigateTo({
						url: '/pages/activities/centuryLaborUnion/imageInteraction'
					})
					// if (item.skip_url) {
					// 	window.location.href = item.skip_url
					// } else {
					// 	uni.showToast({
					// 		title: '敬请期待',
					// 		duration: 2000,
					// 		icon: 'error'
					// 	});
					// }
				} else if (item.id == 236) {
					// console.log('歌手大赛');
					uni.navigateTo({
						url: '/pages/activities/centuryLaborUnion/singingContest?id=' + item.id
					})
				}
				// else if (item.id == 238) {
				// 	// console.log('作品展');
				// 	uni.navigateTo({
				// 		url: '/pages/activities/centuryLaborUnion/workExhibition?id=' + item.id + '&init_id=' + 242
				// 	})
				// } 
				else if (item.id == 237) {
					uni.navigateTo({
						url: '/pages/activities/centuryLaborUnion/modelWorker'
					})
				} else {
					uni.showToast({
						title: '敬请期待',
						duration: 2000,
						icon: 'error'
					});
				}
			},
			show_loading() {
				uni.showLoading({
					title: '加载中...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100%;
	}

	.top {
		width: 100vw;
		height: 500rpx;
	}

	.top>image {
		width: 100%;
		height: 100%;
	}

	.front_page {
		width: 100vw;
	}

	.front_page_diss {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.front_page_diss>image {
		width: 165rpx;
		height: 43rpx;
	}

	.front_page_roll {
		/* 设置容器宽度，根据需要进行调整 */
		width: 500rpx;
		font-size: 25rpx;
		overflow: hidden;
		/* 隐藏超出容器宽度的文字 */
		margin-left: 20rpx;
	}

	.front_page_text {
		/* 设置文字不换行 */
		white-space: nowrap;
		/* 必须将文字包裹在一个块级元素中，才能进行动画效果 */
		display: inline-block;
		/* 设置文字动画效果 */
		animation: scroll-left 8s linear infinite;
	}

	@keyframes scroll-left {
		0% {
			transform: translateX(100%);
			/* 初始位置为容器宽度的100%，文字隐藏在容器右侧 */
		}

		100% {
			transform: translateX(-100%);
			/* 结束位置为容器宽度的-100%，文字完全滚出容器左侧 */
		}
	}

	.details_back {
		width: 100vw;
		min-height: 75vh;
		background: url('../../../static/activity/centuryLaborUnion/indexBj.jpg') 100% 100% / 100% 100%;
	}

	.swiper-index {
		height: 230rpx;
		margin-top: 20rpx;
		padding-top: 40rpx;
	}

	.swiper-item {
		/* border-radius: 30rpx; */
		overflow: hidden;
		/* 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果 */
		/* 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了 */
		width: 660rpx;
		height: 100%;
		transform: scale(0.8);
		transition: all 0.5s ease;
		text-align: center;
		transition: all 0.5s ease-in-out;

		&.active {
			transform: scale(1);
		}
	}

	.activity {
		width: 88%;
		margin: 0 auto;
		margin-top: 100rpx;
		/* 瀑布流设置2列 */
		column-count: 2;
	}

	.activity_frame {
		width: 320rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: white;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.activity_frame>img {
		width: 320rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	.activity_text {
		padding: 12rpx 0 20rpx 0;
	}

	.base_list {
		width: 88%;
		margin: 0 auto;
		display: flex;
		margin-top: 60rpx;
		padding-bottom: 65rpx;
	}

	.base_forr {
		margin-left: 50rpx;
	}

	.base_forr>image {
		width: 180rpx;
		height: 200rpx;
	}
</style>